import React from 'react';
import {Badge, Drawer} from "antd";
import {useNavigate} from "react-router-dom";

/**
 * 抽屉增强组件
 */
export interface DrawerEnhancePropTypes {
    /**
     * 抽屉标题
     */
    title?: string ,
    /**
     * 抽屉第一次打开时触发,可以用于加载数据
     */
    afterOpenChange?: () => void ,
    /**
     * 关闭抽屉时跳转的路由,默认是上一级
     */
    closeUrl?: string ,
    /**
     * 抽屉大小,默认是default
     */
    size?: "large" | "default" | undefined ,
    children: React.ReactNode
}
const DrawerEnhance = ({title,afterOpenChange,closeUrl,size,children}: DrawerEnhancePropTypes) => {
    const navigate = useNavigate() ;
    const [loading, setLoading] = React.useState(false);
    const onClose = () => navigate( closeUrl ?? "..", {replace: true});

    return (
        <Drawer
            title={title}
            size={size}
            open={true}
            destroyOnClose={true}
            maskClosable={false}
            onClose={onClose}
            afterOpenChange={afterOpenChange}
            extra={ <Badge status={loading ? "processing" : "success"} />}
        >
            {children}
        </Drawer>
    );
};

export default DrawerEnhance;